<template>
	<div>
		<el-form :model="user" :rules="rules" class="login-container" ref="loginForm">
			<h3 class="login-title">系统登录</h3>
			<el-form-item prop="username">
				<el-input type="text" v-model="user.username" placeholder="账号"></el-input>
			</el-form-item >
			<el-form-item prop="password">
				<el-input type="password" v-model="user.password" placeholder="密码"></el-input>
			</el-form-item>
			
			<div style="display:flex; height: 20px;margin-bottom: 10px;">
				<el-checkbox class="login-remember" v-model="remember">记住密码</el-checkbox>
			
			</div>
			
			<el-form-item>
				<el-button type="primary" style="width: 100%;" @click="login()">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default{
		
		data(){
			return{
				user:{
					
				},
				remember:false,
				
				rules:{
					username:[
						{required:true,message:'请输入用户名',trigger:['blur','change']},
						// {min:2,max:10,message:"用户名长度必须在2~10个字符之间",trigger:['blur','change']},
						{pattern:/^[a-zA-Z0-9_\u4e00-\u9fa5\u3400-\u4DB5]{2,10}$/,message:"用户名长度必需在2~10个字符之间"}
					],
					password:[
						{required:true,message:'请输入密码',trigger:['blur','change']},
						{min:4,max:20,message:"密码长度必须在4~20个字符之间",trigger:['blur','change']}
						// {pattern:/^[a-zA-Z0-9]{3,20}$/,message:"密码长度必需在3~20个字符之间"}
					]
					
				}
			}
		},
		methods:{
			login(){
				this.$refs["loginForm"].validate(valid=>{
					if(valid){
						let url = "user/login";
						axios.post(url,`username=${this.user.username}&password=${this.user.password}`).then(resp=>{
							if(resp && resp.data.result == "ok"){
								// this.$message({
								// 	message:"登陆成功！",
								// 	type:"success"
								// });
								
								this.$setSessionStorage("user",resp.data.data)
								
								if(this.remember){
									this.$setLocalStorage("username",this.user.username);
									
								}else{
									this.$removeLocalStorage("username")
								}
								
								this.$router.push("/mainpage")
							}
						})
					}
				});
				
			}
			
		},
		created() {
			let user = this.$getLocalStorage("user")
			if(user){
				
				// this.user.username = username;
				this.$set(this.user,"username",username);
				this.$set(this.user,"password",password)
				this.remember = true;
			}
		}
	}
</script>

<style scoped="scoped">
	.login-container{
		width: 350px;
		margin: 100px auto 10px auto;
		border: 1px solid #eaeaea;
		padding: 35px 35px 15px 35px;
		border-radius: 15px;
		box-shadow: 0 0 25px #cac6c6;
	}
	.login-title{
		text-align: center;
		color: #505458;
		margin: 0px auto 40px auto;
	}
	.login-remember{
		margin: 0px 0px 35px 0px;
	}
</style>
